<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text">
        <ul>
            
        </ul>
    </div>
    <!-- <script src=""></script> -->
    <script>
        // https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=26350&wd=?&req=2&csor=1&cb=jQuery1102088687400683593_1665984896967&_=1665984896977
        // 原生js版本
        // 1 获取文本框和ul
        let ipt = document.querySelector('input')
        let ul = document.querySelector('ul')
        // 2 注册输入 oninput
        ipt.oninput = function() {
            // 发请求
            let os = document.createElement('script')
            if(ipt.value.trim() === '') {
                return
            }
            os.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=26350&wd='+ ipt.value +'&req=2&csor=1&cb=fn'
            document.body.appendChild(os)
        }

        function fn(d) {
            ul.innerHTML = ''
            for(let i=0; i<d.g.length; i++) {
                let li = document.createElement('li')
                li.innerHTML = d.g[i].q 
                ul.appendChild(li)
            }
        }
    </script>
</body>
</html>
